<template>
	<view class="main_down_left">
		<view class="main_down_left_title">{{ goods.item.short_name }}</view>
		<view class="main_down_left_goods">
			<view class="main_down_left_goods_price">￥{{ goods.item.price_min / 100 }}</view>
			<view class="main_down_left_goods_img"><image :src="goods.item.pic_url"></image></view>
		</view>
		<view class="main_down_left_support">
			<image v-if="goods.item.tags" src="../../../static/images/home/hot.png"></image>
			支持人数
			<text>{{ goods.item.saled_count }}</text>
		</view>
		<view class="main_down_left_progress">
			<view :style="{ width: width + 'rpx'}" class="currt_progress">
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['goods'],
	computed: {
		width() {
			return (this.goods.item.progress / 100) * 318;
		}
	}
};
</script>

<style lang="scss" scoped>
.main_down_left {
	color: #333333;
	height: 244rpx;
	width: 318rpx;
	// background-color: pink;
	.main_down_left_title {
		font-size: 26rpx;
		line-height: 36rpx;
	}
	.main_down_left_goods {
		display: flex;
		.main_down_left_goods_price {
			height: 150rpx;
			width: 150rpx;
			font-size: 28rpx;
			color: rgb(254, 31, 29);
			line-height: 60rpx;
			font-weight: bold;
		}
		.main_down_left_goods_img {
			height: 150rpx;
			width: 150rpx;
			image {
				height: 150rpx;
				width: 150rpx;
			}
		}
	}

	.main_down_left_support {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		image {
			width: 40rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		text {
			line-height: 38rpx;
			font-size: 20rpx;
			color: rgb(238, 136, 66);
			margin-left: 8rpx;
		}
	}
	.main_down_left_progress {
		position: relative;
		height: 8rpx;
		background-color: #e1e1e1;
		border-radius: 4rpx;
		margin-top: 8rpx;
		overflow: hidden;
		.currt_progress {
			position: absolute;
			height: 8rpx;
			background-image: linear-gradient(to right, rgb(255, 200, 102), rgb(255, 88, 27));
			border-radius: 4rpx;
			width: 100rpx;
		}
	}
}
</style>
